<template>
  <div>
    <el-button @click="showDraw = true">打开绘制部位弹窗</el-button>

    <el-dialog title="绘制部位" width="60%" :visible.sync="showDraw" :close-on-click-modal="false">
      <canvasDraw v-if="showDraw" :groups="groupList" @save="onSave" @colse="onClose" />
    </el-dialog>
  </div>
</template>
<script>
// canvasDraw 使用例子
// 测试时，注释掉 canvasDraw 187 行，打开 188 行
import canvasDraw from './canvasDraw.vue'
export default {
  components: { canvasDraw },
  data() {
    return {
      showDraw: false,
      groupList: []
    }
  },
  created() {
    this.groupList = [
      {
        fileId: '571318',
        scale: 0.9416058394160584,
        value: [
          {
            points: [
              { x: 32.66796, y: 23.394573722627733 },
              { x: 37.81248, y: 707.7150072262773 },
              { x: 1024.281672, y: 705.1423329197081 },
              { x: 1025.5685760000001, y: 15.677279605839415 }
            ],
            id: 'dc3bf8243ef0ff13f9349d7fc8272309',
            name: '园区',
            layoutSpaceId: 'f46cbc3fa34ab2b87a176571e393c746',
            layoutId: '1a6b8935bda0791a208449bcd367b62c',
            fileId: '571318'
          }
        ]
      },
      { scale: '', value: [] }
    ]
  },
  methods: {
    onSave(data) {
      console.log('data', data)
      this.showDraw = false
    },
    onClose(val) {
      if (val) this.showDraw = false
    }
  }
}
</script>
